<template>
  <div>
    <el-container>
      <el-header
        ><el-button type="primary" icon="el-icon-refresh" @click="reset"
          >刷新</el-button
        ></el-header
      >
      <el-main>
        <el-row :gutter="20">
          <el-col :span="4" v-for="(logoCard, index) in logoCards">
            <div style="text-align: center">
              <a :href="logoCard.logoutUrl" target="_blank">
                <el-image
                  class="logoImg"
                  :src="baseUrl + logoCard.logo"
                  fit="fill"
                  v-if="!isBigs[index]"
                  @mouseenter="logoMouseEnter(index)"
                  @mouseleave="logoMouseLeave(index)"
                  @contextmenu.prevent="logoEdit(index)"
                ></el-image>
                <el-image
                  class="logoImgBig"
                  :src="baseUrl + logoCard.logo"
                  fit="fill"
                  v-if="isBigs[index]"
                  @mouseenter="logoMouseEnter(index)"
                  @mouseleave="logoMouseLeave(index)"
                  @contextmenu.prevent="logoEdit(index)"
                ></el-image>
              </a>
              <div>{{ logoCard.name }}</div>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <el-button
          class="addUrlBtn"
          type="warning"
          @click="table = true"
          icon="el-icon-plus"
          circle
        ></el-button
      ></el-footer>
    </el-container>
    <el-drawer
      title="添加网址"
      :visible.sync="table"
      direction="rtl"
      size="30%"
    >
      <el-button
        type="primary"
        icon="el-icon-refresh"
        @click="getAllServiceReset"
        class="getAllServiceReset"
        >刷新</el-button
      >
      <el-table :data="gridData">
        <el-table-column label="logo" width="150">
          <template slot-scope="scope">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image
                  class="logoImg"
                  :src="baseUrl + scope.row.logo"
                ></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="name"
          label="系统名称"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addService(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除这个系统吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delLogoCancel">取 消</el-button>
        <el-button type="primary" @click="delLogoConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getServicesByUserId,
  addService,
  delServiceUser,
} from "../api/sso/portal/services";

import myUrl from "@/myUrl";
import { getAllService } from "../api/sso/cas/services";
export default {
  name: "Index",
  data() {
    return {
      dialogVisible: false,
      baseUrl: myUrl.baseUrl,
      visible: false,
      isBigs: [],
      logoCards: [],
      table: false,
      dialog: false,
      loading: false,
      gridData: [],
      userId: undefined,
      // 临时储存logo被右击时的serviceId
      logoEditServiceId: undefined,
    };
  },
  methods: {
    // 鼠标移入logo
    logoMouseEnter(index) {
      this.$set(this.isBigs, index, true);
    },
    // 鼠标移除logo
    logoMouseLeave(index) {
      this.$set(this.isBigs, index, false);
    },
    // logo右击
    logoEdit(index) {
      this.dialogVisible = true;
      this.logoEditServiceId = this.logoCards[index].id;
    },
    // 删除logo确认方法
    delLogoConfirm() {
      this.dialogVisible = false;
      this.delLogo(this.logoEditServiceId);
    },
    // 删除logo取消方法
    delLogoCancel() {
      this.dialogVisible = false;
      this.logoEditServiceId = undefined;
    },
    //删除logo方法
    delLogo(serviceId) {
      let serviceUser = {
        userId: this.userId,
        serviceId: serviceId,
      };
      delServiceUser(serviceUser).then((res) => {
        this.logoEditServiceId = undefined;
        this.getAllServiceReset();
      });
    },
    //获取自己的系统
    reset() {
      let data = {
        userId: this.$store.getters.userId,
      };
      getServicesByUserId(data).then((res) => {
        this.logoCards = res;
      });
    },
    //添加按钮方法
    addService(row) {
      let serviceId = row.id;
      let username = this.$store.getters.name;
      let serviceIdUsername = {
        serviceId: serviceId,
        username: username,
      };
      addService(serviceIdUsername).then((res) => {
        this.$message({
          type: "success",
          message: "添加成功",
        });
        this.reset();
      });
    },
    //获取全部service方法
    getAllServiceReset() {
      getAllService().then((res) => {
        this.gridData = res.rows;
        this.reset();
      });
    },
  },
  created() {
    this.reset();
    this.getAllServiceReset();
    this.userId = this.$store.getters.userId;
  },
};
</script>

<style scoped lang="scss">
.el-container {
  height: calc(100vh - 94px);
  margin-top: 10px;
}
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  height: 150px;
}

.logoImg {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  cursor: pointer;
}

.logoImgBig {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  cursor: pointer;
}
.getAllServiceReset {
  margin: 5px;
}
.addUrlBtn {
  margin-left: 95%;
}
</style>

